<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>宠物商店</title>
<!--/tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--//tags -->
<link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css" media="all" />
<link th:href="@{/css/styleIndex.css}" rel="stylesheet" type="text/css" media="all" />
<link th:href="@{/css/font-awesome.css}" rel="stylesheet">
<link th:href="@{/css/easy-responsive-tabs.css}" rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" th:href="@{https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css}">
<link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
<!-- //for bootstrap working -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,900,900italic,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- header -->
<div class="header" id="home">
	<div class="container">
		<ul>
		    <li> <a th:href="@{/admin/loginToIndex}"><i class="fa fa-unlock-alt" aria-hidden="true"></i> 登 录 </a></li>
			<li> <a th:href="@{/register}" data-target="#myModal2"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 注 册 </a></li>
			<li><i class="fa fa-phone" aria-hidden="true"></i> Call : 15055312615</li>
			<li><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="mailto:info@example.com">420919469@qq.com</a></li>
		</ul>
	</div>
</div>
<!-- //header -->
<!-- header-bot -->
<div class="header-bot">
	<div class="header-bot_inner_wthreeinfo_header_mid">
		<div class="col-md-4 header-middle">
			<form th:action="@{/search}" method="post">
					<input type="search" id="search" name="search" placeholder="Search here..." required="" autocomplete="off" style="position: relative">
					<input type="submit" value=" ">
					<div style="position: absolute;top: 100%;width: 395px; border: 1px solid #dddddd;background-color:white;display: none"  id="tips">
					</div>
				<div class="clearfix"></div>
			</form>
		</div>
		<!-- header-bot -->
		<div class="col-md-4 logo_agile">
				<h1><span>PETS</span>宠物商店</h1>
		</div>
		<a th:href="@{/myInfo}">
		<div class="right m-item m-mobile-hide menu" th:if="${user != null}">
				<div class="text">
					<img class="ui avatar image" src="https://unsplash.it/100/100?image=1005" th:src="${user.avatarPath == null} ? '' : ${user.avatarPath}">
					<span><h2 th:text="${user.username}"> 郭江富</h2></span>
				</div>
		</div>
		</a>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //header-bot -->
<!-- banner -->
<div class="ban-top">
	<div class="container">
		<div class="top_nav_left">
			<nav class="navbar navbar-default">
			  <div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse menu--shylock" id="bs-example-navbar-collapse-1">
				  <ul class="nav navbar-nav menu__list">
					<li class="active menu__item menu__item--current"><a class="menu__link" href="index.html" th:href="@{/index}">主页 <span class="sr-only">(current)</span></a></li>
					<li class=" menu__item"><a class="menu__link" href="about.html" th:href="@{/myInfo}">个人中心</a></li>
					<li class=" menu__item"><a class="menu__link" th:href="@{/car}">购物车</a></li>
					<li class=" menu__item"><a class="menu__link" th:href="@{/orders}">我的订单</a></li>
				  </ul>
				</div>
			  </div>
			</nav>	
		</div>
<!--		购物车-->

	</div>
</div>
<!-- //banner-top -->
<!-- Modal1 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
						<div class="modal-body modal-body-sub_agile">
						<div class="col-md-8 modal_body_left modal_body_left1">
						<h3 class="agileinfo_sign">登录 <span>Now</span></h3>
						<form th:action="@{/login}" method="post">
							<div class="styled-input agile-styled-input-top">
								<input type="text" name="username" required="">
								<label>用户名</label>
								<span></span>
							</div>
							<div class="styled-input">
								<input type="password" name="password" required="">
								<label>密码</label>
								<span></span>
							</div>
							<h3 th:if="${loginMessage} != null" th:text="${loginMessage}"></h3>
							<input type="submit" value="登录">
						</form>
														<div class="clearfix"></div>
														<p><a href="#" data-toggle="modal" data-target="#myModal2" style="color:deepskyblue; font-size: 15px">还&nbsp;没&nbsp;有&nbsp;账&nbsp;号?</a></p>

						</div>
						<div class="col-md-4 modal_body_right modal_body_right1">
							<img src="images/log_pic.jpg" alt=" "/>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<!-- //Modal content-->
			</div>
		</div>
<!-- //Modal1 -->
<!-- Modal2 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
						<div class="modal-body modal-body-sub_agile">
						<div class="col-md-8 modal_body_left modal_body_left1">
						<h3 class="agileinfo_sign">注册 <span>Now</span></h3>
						 <form action="#" method="post">
							<div class="styled-input agile-styled-input-top">
								<input type="text" name="Name" required="">
								<label>用户名</label>
								<span></span>
							</div>
							<div class="styled-input">
								<input type="password" name="password" required=""> 
								<label>密码</label>
								<span></span>
							</div> 
							<div class="styled-input">
								<input type="password" name="Confirm Password" required=""> 
								<label>确认密码</label>
								<span></span>
							</div> 
							<input type="submit" value="Sign Up">
						</form>

						</div>
						<div class="col-md-4 modal_body_right modal_body_right1">
							<img src="images/log_pic.jpg" alt=" "/>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<!-- //Modal content-->
			</div>
		</div>
<!-- //Modal2 -->

<!-- banner -->
	<input type="hidden" id="theMessage" th:value="${message== null} ? -1 : ${message}">
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<!-- Indicators -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1" class=""></li>
			<li data-target="#myCarousel" data-slide-to="2" class=""></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<div class="item active"> 
				<div class="container">
					<div class="carousel-caption">
						<h3>种类<span>丰富</span></h3>
						<p>pet for you</p>
					</div>
				</div>
			</div>
			<div class="item item2"> 
				<div class="container">
					<div class="carousel-caption">
						<h3>价格 <span>实惠</span></h3>
						<p>reasonable price</p>
					</div>
				</div>
			</div>
			<div class="item item3"> 
				<div class="container">
					<div class="carousel-caption">
						<h3>宇宙 <span>最大</span></h3>
						<p>Biggest of Universe</p>
					</div>
				</div>
			</div>
		</div>
		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
		<!-- The Modal -->
    </div> 
	<!-- //banner -->
    <div class="banner_bottom_agile_info">
	    <div class="container">
            <div class="banner_bottom_agile_info_inner_w3ls">
    	           <div class="col-md-6 wthree_banner_bottom_grid_three_left1 grid">
						<figure class="effect-roxy">
							<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg" alt=" " class="img-responsive" />
							<figcaption>
								<h3><span>C</span>ats</h3>
								<p>All Types</p>
							</figcaption>
						</figure>
					</div>
					 <div class="col-md-6 wthree_banner_bottom_grid_three_left1 grid">
						<figure class="effect-roxy">
							<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1591264451,1218619&fm=26&gp=0.jpg" alt=" " class="img-responsive" />
							<figcaption>
								<h3><span>D</span>ogs</h3>
								<p>All Types</p>
							</figcaption>
						</figure>
					</div>
					<div class="clearfix"></div>
		    </div>
		 </div>
    </div>
	<!-- schedule-bottom -->
<!--/grids-->
<!-- /new_arrivals -->
	<div class="new_arrivals_agile_w3ls_info"> 
		<div class="container">
		    <h3 class="wthree_text_info">爱宠 <span>上市</span></h3>
				<div id="horizontalTab">
						<ul class="resp-tabs-list">
							<a th:href="@{/index/{id}(id=${type.id})}" th:each="type: ${types}"><li th:classappend="${type.id}==${index} ? 'resp-tab-active' : '' " th:text="${type.name}"> 狗</li></a>
						</ul>
					<div class="resp-tabs-container">
					<!--/tab_one-->
						<div class="tab1">
							<div th:if="${pets != null}" th:each="pet:${pets}" class="col-md-3 product-men">
								<div class="men-pro-item simpleCart_shelfItem">
									<div class="men-thumb-item">
										<img th:src="${pet.imagePath}" alt="" class="pro-image-front">
											<div class="men-cart-pro">
												<div class="inner-men-cart-pro">
													<a th:href="@{/detail/{id}(id=${pet.id})}" class="link-product-add-cart">查看详情</a>
												</div>
											</div>
											<span class="product-new-top" th:text="${pet.male}">雌性</span>

									</div>
									<div class="item-info-product ">
										<h4><a href="single.html" th:text="${pet.name}"></a></h4>
										<div class="info-product-price">
											<span class="item_price" th:text="${pet.price}">$45.99</span>
										</div>
										<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2" >
															<form th:action="@{/car/addPet/{id}(id=${pet.id})}" method="post">
																<fieldset>
																	<input type="submit" name="submit" value="加入购物车" class="button" />
																</fieldset>
															</form>
														</div>

									</div>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<!--//tab_one-->
					</div>
				</div>	
			</div>
		</div>
	<!-- //new_arrivals --> 
	<!-- /we-offer -->
		<div class="sale-w3ls">
			<div class="container">
				<h6> <span>价格低于实体店40% 没有中间商赚差价</span> </h6>
			</div>
		</div>
	<!-- //we-offer -->
<!-- footer -->
<div class="footer">
	<div class="footer_agile_inner_info_w3l">
		<div class="col-md-3 footer-left">
			<h2><span>P</span>et Shop</h2>
			<p>郭江富的个人商店，店主长得帅着一，里面的宠物
				价格特别实惠，没有中间商赚差价，买到就是赚到，宇宙第一大宠物商店。</p>
		</div>
		<div class="col-md-9 footer-right">
			<div class="sign-grds">
				
				<div class="col-md-5 sign-gd-two">
					<h4>Store <span>Information</span></h4>
					<div class="w3-address">
						<div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-phone" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>电话号码</h6>
								<p>+15055312615</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-envelope" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>邮箱地址</h6>
								<p>Email :<a href="mailto:example@email.com"> 420919469@qq.com</a></p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="w3-address-grid">
							<div class="w3-address-left">
								<i class="fa fa-map-marker" aria-hidden="true"></i>
							</div>
							<div class="w3-address-right">
								<h6>地点</h6>
								<p>中国 湖南 长沙 中南大学 铁道学院 铁二423
								
								</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-3 sign-gd flickr-post">
					<h4>郭江富 <span>帅照</span></h4>
					<ul>
						<li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t4.jpg" alt=" " class="img-responsive" /></a></li>
						<li><a href="single.html"><img src="images/t1.jpg" alt=" " class="img-responsive" /></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="clearfix"></div>
		<p class="copy-right">Copyright &copy; 2020.Company GuoJiangfu All rights reserved.</a></p>
	</div>
</div>
<!-- //footer -->

<!-- login -->
			<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content modal-info">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="modal-body modal-spa">
							<div class="login-grids">
								<div class="login">
									<div class="login-bottom">
										<h3>Sign up for free</h3>
										<form>
											<div class="sign-up">
												<h4>Email :</h4>
												<input type="text" value="Type here" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Type here';}" required="">
											</div>
											<div class="sign-up">
												<h4>Password :</h4>
												<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="">

											</div>
											<div class="sign-up">
												<h4>Re-type Password :</h4>
												<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="">

											</div>
											<div class="sign-up">
												<input type="submit" value="REGISTER NOW" >
											</div>

										</form>
									</div>
									<div class="login-right">
										<h3>Sign in with your account</h3>
										<form>
											<div class="sign-in">
												<h4>Email :</h4>
												<input type="text" value="Type here" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Type here';}" required="">
											</div>
											<div class="sign-in">
												<h4>Password :</h4>
												<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="">
												<a href="#">Forgot password?</a>
											</div>
											<div class="single-bottom">
												<input type="checkbox"  id="brand" value="">
												<label for="brand"><span></span>Remember Me.</label>
											</div>
											<div class="sign-in">
												<input type="submit" value="SIGNIN" >
											</div>
										</form>
									</div>
									<div class="clearfix"></div>
								</div>
								<p>By logging in you agree to our <a href="#">Terms and Conditions</a> and <a href="#">Privacy Policy</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
<!-- //login -->
<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

<!-- js -->
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<!-- //js -->
<script th:src="@{/js/modernizr.custom.js}"></script>
	<!-- Custom-JavaScript-File-Links --> 
	<!-- cart-js -->
	<script th:src="@{/js/minicart.min.js}"></script>
<script>
	// Mini Cart
	paypal.minicart.render({
		action: '#'
	});

	if (~window.location.search.indexOf('reset=true')) {
		paypal.minicart.reset();
	}
</script>

	<!-- //cart-js --> 
<!-- script for responsive tabs -->						
<script th:src="@{/js/easy-responsive-tabs.js}"></script>
<script>
	$(document).ready(function () {
	$('#verticalTab').easyResponsiveTabs({
	type: 'vertical',
	width: 'auto',
	fit: true
	});
	});
</script>
<!-- //script for responsive tabs -->		
<!-- stats -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
	<script th:src="@{js/jquery.waypoints.min.js}"></script>
	<script th:src="@{js/jquery.countup.js}"></script>
	<script>
		$('.counter').countUp();
	</script>
<!-- //stats -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" th:src="@{/js/move-top.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.easing.min.js}"></script>
<!--自动搜索功能-->
<script>

	//三种对应函数
	//鼠标移动到内容上
	function changeBackColor_over(div){
		$(div).css("background-color","#CCCCCC");
	}
	//鼠标离开内容
	function changeBackColor_out(div){
		$(div).css("background-color","");
	}
	//将点击的内容放到搜索框
	function setSearch_onclick(div){
		$("#search").val(div.innerText);
		$("#tips").css("display","none");
	}


	$("#search").bind("input propertychange",function (){
		console.log("进入change函数")
		var content=$(this).val();
		//如果当前搜索内容为空，无须进行查询
		if(content==""){
			$("#tips").css("display","none");
			return ;
		}
		let html ="";
		let res=[];
		$.ajax({
			type: "get",
			url: "/autoSearch",
			data:{content:content},
			success:function (data){
				res = data.message;
				for (let i = 0; i < res.length; i++) {
					html +="<div onclick='setSearch_onclick(this)' onmouseout='changeBackColor_out(this)' onmouseover='changeBackColor_over(this)'>"+res[i]+"</div>"
				}
				$("#tips").html(html);
				$("#tips").css("display","block");
			}
		})
	})
</script>


<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->


<!-- for bootstrap working -->
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>
